<template>
	<view class="box">
		<u-navbar back-text="" back-icon-color="#000000" :border-bottom="false" title-color="#000000" title="金蜜券大奖"
			:background="background"></u-navbar>
		<view class="top">
			<view class="card">
				<view class="head-top">
          <view class="left">
            <view class="up">
              <text class="text">总数</text>
              <text class="button" @click="toPage('detailed')">查看明细</text>
            </view>
            <view class="down">{{parseInt(total)}}</view>
          </view>
          <view class="right" @click="toPage('select')">
            <image class="img" src="../static/easterEgg.png"></image>
          </view>
        </view>
        <view class="head-bottom">
          <view class="item" v-for="item in tabsList" :key="item.maid">
            <image class="img" :src="img_pre + item.transparent_logo"></image>
            <text class="title">{{item.title}}</text>
            <view class="num">
              {{item.number}}
            </view>
            <text class="company">张</text>
          </view>
        </view>
			</view>
		</view>
		<view class="tabs"></view>
		<view class="content">
			<view class="title">
				<view class="name">
					任务专区
				</view>
<!--				<view class="date" @click="show=true">-->
<!--					{{date}}-->
<!--					<image src="../../../static/image/xia.png" mode=""></image>-->
<!--				</view>-->
			</view>
			<view class="list" v-for="(item,index) in list" :key="item.task_id">
        <view class="left">
          <view class="pic">
            <image class="img" :src="img_pre + item.manor_logo"></image>
          </view>
          <view class="content-box">
            <view class="title">{{ item.title }}</view>
            <view class="text">
              <text class="m-r">{{ item.content }}</text>
            </view>
          </view>
        </view>
        <view class="right" @click="handleToPage(item.finish_status,item.type,item.task_id,index)"
              :class="item.finish_status === 2 ? 'complete':''">{{item.finish_status === 0 ? '去完成': item.finish_status === 1 ? '去领取' : '已领取'}}</view>
<!--				<view class="left">-->
<!--					<view class="view">-->
<!--						<view class="name" v-if="item.now_status==0||item.now_status==3">-->
<!--							抢拍成功收获-->
<!--						</view>-->
<!--						<view class="name" v-if="item.now_status==1||item.now_status==2">-->
<!--							预期抢拍-->
<!--						</view>-->
<!--						<view class="name" v-if="item.now_status==4">-->
<!--							抢拍失败损失-->
<!--						</view>-->
<!--						<view class="text" v-if="item.now_status==0" :class="item.now_status==4?'sub':'add'">-->
<!--							即将获得奖励-->
<!--						</view>-->
<!--						<view class="text" v-else :class="item.now_status==4?'sub':'add'">-->
<!--							{{item.profit_number}}<text>Ghy</text>-->
<!--						</view>-->
<!--					</view>-->
<!--					<view class="view">-->
<!--						<view class="name" v-if="item.now_status==0||item.now_status==3">-->
<!--							抢拍成功好友-->
<!--						</view>-->
<!--						<view class="name" v-if="item.now_status==1||item.now_status==2">-->
<!--							预约人数-->
<!--						</view>-->
<!--						<view class="name" v-if="item.now_status==4">-->
<!--							抢拍失败好友-->
<!--						</view>-->
<!--						<view class="text">-->
<!--							{{item.person_count}} <text>人</text>-->
<!--						</view>-->
<!--					</view>-->
<!--					<view class="view">-->
<!--						<view class="name" v-if="item.now_status==0||item.now_status==3">-->
<!--							当日抢拍结束-->
<!--						</view>-->
<!--						<view class="name" v-if="item.now_status==1||item.now_status==2">-->
<!--							进场时间-->
<!--						</view>-->
<!--						<view class="name" v-if="item.now_status==4">-->
<!--							当日抢拍结束-->
<!--						</view>-->
<!--						<view class="text">-->
<!--							{{secondsFormat(item.open_time)}}-{{secondsFormat(item.end_time)}}-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="right" @click="toGO(1,index)" v-if="item.now_status==1">-->
<!--					<image src="../static/c7.png" mode=""></image>-->
<!--				</view>-->
<!--				<view class="right" @click="toGO(0,index)" v-if="item.now_status==2">-->
<!--					<image src="../static/c2.png" mode=""></image>-->
<!--				</view>-->
			</view>
		</view>
		<u-popup :closeable="true" close-icon-pos="top-left" borderRadius="10" mode="bottom" v-model="show2">
			<view class="popup">
				<view class="_view">
					<view class="title">
						{{state==0?'进场':'预约'}}
					</view>
					<view class="cont">
						<view class="name" v-if="state==1">
							{{list[index].title}}预约价格为
						</view>
						<view class="name" v-if="state==0">
							{{list[index].title}}
						</view>
						<view class="text" v-if="state==1">
							<text>{{list[index].need_kmb_order}}</text> 蜜贝
						</view>
					</view>
					<view class="cont2" v-if="state==1">
						<view class="t1">
							选择抢拍次数
						</view>
						<view class="select" @click="abc">
							<view class="da omit">
								{{label}}
							</view>
							<view class="xiao">></view>
						</view>
					</view>
				</view>
				<u-button type="success" v-if="state==0" :ripple="true" @click="jinchang" class="button">确认进场</u-button>
				<u-button type="success" v-if="state==1" :ripple="true" @click="MakeAnAppointment" class="button">确认预约
				</u-button>
			</view>
		</u-popup>
		<u-popup :closeable="true" close-icon-pos="top-left" borderRadius="10" mode="bottom" v-model="show3">
			<view class="popup">
				<view class="_view">
					<view class="title">
						进场失败
					</view>
					<view class="cont">
						<view class="name2">
							进入该蜂巢需要成功抢拍之前的蜂巢 的蜂巢，如未抢拍时想进场则需消耗
							<text class="t1"> {{list[index].need_gdb_number}} </text>
							<text class="t2">金蜜</text>
						</view>
					</view>
				</view>
				<u-button @click="useGdbIntoManor" type="success" :ripple="true" class="button">金蜜入场</u-button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-popup :closeable="true" close-icon-pos="top-left" borderRadius="10" mode="bottom" v-model="show1">
			<view class="popup">
				<view class="_view">
					<view class="title">
						{{state==0?'进场':'预约'}}失败
					</view>
					<view class="cont" v-if="json.score>0">
						<view class="name">
							进入 {{list[index].title}}抢拍需要有{{json.scoreX}}经验值， 您还差
						</view>
						<view class="text">
							<text>{{json.score}}</text> 经验值
						</view>
					</view>
					<view class="cont" v-else-if="json.invite_count>0">
						<view class="name">
							进入 {{list[index].title}}抢拍需要 邀请{{json.invite_countX}}个人，您还差
						</view>
						<view class="text">
							<text>{{json.invite_count}}</text> 蜜贝
						</view>
					</view>
				</view>
				<u-button v-if="json.scoreX>0" @click="toPage('/pages/htmlD/experience/index')" type="success"
					:ripple="true" class="button">查看经验</u-button>
				<u-button v-else-if="json.invite_countX>0" @click="toPage('/pages/htmlC/invitation/index')"
					type="success" :ripple="true" class="button">立即邀请</u-button>
				<u-button v-else-if="state==0" type="success" :ripple="true" class="button">立即抢拍</u-button>
				<!-- <u-button v-if="state==1" @click="show1=false,toPage('/pages/htmlC/invitation/index')" type="success" :ripple="true" class="button">前往邀请</u-button> -->
			</view>
		</u-popup>
		<u-picker @confirm="confirm" :endYear="endYear" v-model="show" mode="time"></u-picker>
		<u-select v-model="site" :list="list1" @confirm="confirm2"></u-select>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				background: {
					'background': '#FAFAFA'
				},
        tabsList: [],
				state: 0,
				show: false,
				date: "",
				site: false,
				list: [{title:0}],
        total: 0,
				info: {},
				json: {},
				show1: false,
				show2: false,
				show3: false,
				index: 0,
				list1: [{
					value: 0
				}],
				label: "",
				value: "",
			}
		},
		onLoad(option) {
			than = this;
			than.date = than.getNowFormatDate();
		},
		onShow() {
			// than.getList()
      than.getTicket()
			than.post("api/Goldbean/goldDetails", null, function(data) {
				than.info = data;
			})
		},
		methods: {
      /**
       * 获取金密卷大奖页
       */
      getTicket() {
        than.post("api/ticket/manorTicketNumber",{}, function(data) {
          const {manorList, jinmijuan_number, tasklist} = data
          than.total = jinmijuan_number
          than.tabsList = manorList
          than.list = tasklist
        })
      },
      /**
       * 领取或跳转
       * @param status
       * @param type
       * @param task_id
       * @param index
       */
      handleToPage(status,type,task_id,index) {
        console.log(status,type,task_id,index)
        if(status === 0) {
          const toPage = type === 2 ? '/pages/htmlB/my/index?current=1' : '/pages/htmlI/store/index'
          type === 1 ? uni.switchTab({url: '/pages/home/index'}) : than.toPage(toPage)
        }else if(status === 1) {
          than.post("api/ticket/getTicket", {
            task_id
          }, function(data) {
            uni.showToast({
              title: data,
              icon: 'none',
              duration: 2000
            })
            than.$set(than.list[index],'finish_status',2)
          })
        }
      },
			useGdbIntoManor() {
				than.post("api/index/useGdbIntoManor", {
					maid: than.list[than.index].maid,
					use_type: 2
				}, function(data) {
					than.show3 = false
					than.toPage('/pages/htmlB/farm/index?maid=' + than.list[than.index].maid + '&title=' + than
						.list[than.index]
						.title)
				})
			},
			abc() {
				than.site = true
			},
			jinchang() {
				than.show = false
				if (than.list[than.index].instatus == 1) {
					than.toPage('/pages/htmlB/farm/index?maid=' + than.list[than.index].maid + '&title=' + than.list[than
							.index]
						.title)
				} else {
					than.show3 = true
				}
			},
			MakeAnAppointment() {
				than.post("api/manor/MakeAnAppointment", {
					maid: than.list[than.index].maid,
					buy_number: than.value
				}, function(data) {
					than.show = false
					than.toast("预约成功")
				})
			},
			toGO(state, index) {
				than.inviteAndBuy()
				than.state = state;
				than.index = index;
			},
			inviteAndBuy() {
				than.post("api/manor/inviteAndBuy", {
					maid: than.list[than.index].maid
				}, function(data) {
					than.json = than.getGrade(data, than.list[than.index])
					if (than.state != 2) {
						than.post("api/manor/appointmentChooseList", {
							maid: than.list[than.index].maid
						}, function(data) {
							than.list1 = [];
							var arr = data.buy_number_list.split(',');
							than.label = arr[0] + "次"
							than.value = arr[0]
							for (let i in arr) {
								var other = arr[i]
								var json1 = {
									value: other,
									label: other + "次"
								}
								than.list1.push(json1)
							}
						})
						if (than.json.state) {
							than.show2 = true
						} else {
							if (than.json.privilege == 0) {
								than.show2 = true
							} else {
								than.show1 = true
							}
						}
					}
				})
			},
			confirm(e) {
				than.date = than.getNowFormatDate(e.timestamp)
				than.page = 1;
				// than.getList()
        than.getTicket()
			},
			confirm2(e) {
				than.label = e[0].label
				than.value = e[0].value
			},
			getList() {
				than.post("api/Goldbean/manorList", {
					begin_time: than.date,
				}, function(data) {
					than.list = data.list;
				})
			},
			secondsFormat(s) {
				var day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
				var hour = Math.floor((s - day * 24 * 3600) / 3600);
				var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
				minute = minute < 10 ? ('0' + minute) : minute
				return hour + ":" + minute;
			}
		}
	}
</script>

<style lang="less" scoped>
  .box {
    background-color: #FAFAFA;
    padding: 0 36rpx;
  }
	.popup {
		width: 100%;

		.popup_top {
			height: 30rpx;
		}

		._view {
			background: #FFFFFF;

			.title {
				height: 108rpx;
				line-height: 108rpx;
				text-align: center;
				border-bottom: 2rpx solid #F6F6F6;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.code {
				text-align: center;
				padding-bottom: 40rpx;

				image {
					width: 81rpx;
					height: 81rpx;
				}
			}

			.cont2 {
				.select {
					width: 413rpx;
					height: 100rpx;
					line-height: 1;
					background: #FFFFFF;
					border: 1rpx solid #8E8E8E;
					border-radius: 20rpx;
					margin: 20rpx auto;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;

					.da {
						padding: 0 40rpx;
					}

					.xiao {
						margin-left: auto;
						margin-right: 41rpx;
					}
				}

				.t1 {
					text-align: center;
				}

				.t2 {
					overflow: hidden;
					padding: 20rpx;

					.active {
						border: 1px solid #e3ebfe !important;
					}

					.t {
						float: left;
						border: 1px solid #000000;
						min-width: 50rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 10rpx;
					}
				}
			}

			.cont {
				text-align: center;
				font-size: 28rpx;
				color: #333333;

				.name {
					margin: 0 90rpx;
					height: 115rpx;
					line-height: 115rpx;
				}

				.name2 {
					margin: 20rpx;

					.t1 {

						font-size: 48rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FEC31D;
					}

					.t2 {

						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FEC31D;
					}
				}

				.contentType {
					padding: 24rpx 20rpx 63rpx;

					.active {
						border: 1rpx solid #FFC31E !important;

						.number {

							color: #FD3D28 !important;

							text {
								color: #FD3D28 !important;
							}
						}
					}

					.list {
						text-align: center;
						background: #F8F8F8;
						height: 263rpx;
						border-radius: 20rpx;
						position: relative;
						border: 1rpx solid #FFFFFF;

						.triangle {
							position: absolute;
							bottom: 0;
							right: 0;
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 0 0 24rpx 24rpx;
							border-color: transparent transparent #FEC31D transparent;
						}

						image {
							margin-top: 38rpx;
							width: 78rpx;
							height: 80rpx;
						}

						.namex {
							line-height: 80rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}

						.number {

							font-size: 36rpx;
							font-family: DINCond-Black;
							font-weight: 400;
							color: #666666;

							text {
								font-size: 28rpx;
								font-family: DIN Medium;
								font-weight: bold;
								color: #666666;
							}
						}
					}
				}


				.text {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #F46813;
					font-size: 28rpx;

					text {
						font-size: 64rpx;
						margin: -30rpx 10rpx 0;
					}
				}
			}
		}

		.button {
			border-radius: 40rpx;
			border: 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
		}
	}

	.content {
		.title {
      margin-top: 57rpx;

			.name {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}

			.date {
				margin-left: auto;
				height: 58rpx;
				background: #FFFFFF;
				border-radius: 29rpx;
				display: flex;
				align-items: center;
				padding: 0 23rpx;

				image {
					margin-left: 6rpx;
					width: 24rpx;
					height: 14rpx;
				}
			}
		}

		.list {
			margin-top:  24rpx;
			background: #FFFFFF;
			width: 678rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
      justify-content: space-between;
      padding: 29rpx 26rpx 33rpx 24rpx;

      .left {
        height: 141rpx;
        display: flex;
        align-items: center;
        .pic {
          width: 60rpx;
          height: 60rpx;
          margin-right: 23rpx;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .content-box {
          height: 100%;
          .title {
            margin: 29rpx 0 21rpx 0 !important;
            font-size: 30rpx;
            margin-bottom: 27rpx;
          }
          .text {
            font-size: 24rpx;
            color: #00C693;
            background-color: #F0FFFF;
            padding: 9rpx 9rpx 9rpx 8rpx;
            border-radius: 10rpx;
          }
        }
      }
      .right {
        padding: 16rpx 29rpx 15rpx 28rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        border-radius: 26.98rpx;
        background: linear-gradient(-90deg, #FFB456, #FFB456, #FE8657);
        box-shadow: 0px 3px 10px 0px rgba(255, 180, 86, 0.6);
      }
		}
	}
  .complete {
    background: #BDC3D3 !important;
    box-shadow: 0 0 0 0 !important;
  }
	page {
		background: #FAFAFA;
	}

	//.tabs {
	//	width: 678rpx;
	//	/* #ifdef APP-PLUS */
	//	margin: calc(330rpx + var(--status-bar-height)) auto 0;
	//	/* #endif */
	//	/* #ifdef H5 */
	//	margin: 380rpx auto 0;
	//	/* #endif */
	//}

	.top {
		width: 100%;
		.card {
			width: 678rpx;
			background: #FCF5EA;
      padding: 35rpx 56rpx 40rpx 23rpx;
			border-radius: 12rpx;

      .head-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          .up {
            .text {
              font-size: 32rpx;
              font-weight: 500;
              margin-right: 19rpx;
            }
            .button {
              width: 106rpx;
              height: 42rpx;
              color: #FFFFFF;
              padding: 11rpx 9rpx 10rpx 11rpx;
              font-size: 22rpx;
              border-radius: 21rpx;
              background: linear-gradient(-90deg, #FFB456, #FFB456, #FE8657);
              box-shadow: 0 3rpx 10rpx 0 rgba(255, 180, 86, 0.6);
            }
          }
          .down {
            margin-top: 37rpx;
            font-size: 60rpx;
            color: #FB683D;
            font-family: Myriad Pro;
            font-weight: bold;
          }
        }
        .right {
          width: 84rpx;
          height: 85rpx;
          .img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .head-bottom {
        margin-top: 60rpx;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item {
          height: 66rpx;
          display: flex;
          align-items: center;
          .img {
            width: 30rpx;
            height: 30rpx;
          }
          .title {
            margin: 0 33rpx 0 14rpx;
            font-size: 24rpx;
            color: #4B76F6;
          }
          .num {
            width: 46rpx;
            font-size: 32rpx;
            color: #F66337;
            text-align: right;
          }
          .company {
            margin-left: 11rpx;
            font-size: 24rpx;
            color: #F66337;
          }
        }
      }
		}

	}
</style>
